<template>
  <el-container>
    <el-aside width="200px">
      <el-card>
        <el-button @click="onAddComponent('RForm')">RForm</el-button>
      </el-card>

      <el-card>
        <el-button @click="onAddComponent('RSearchForm')">RSearchForm</el-button>
      </el-card>

      <el-card>
        <el-button @click="onAddComponent('RTable')">RTable</el-button>
      </el-card>

      <el-card>
        <el-button @click="onAddComponent('ELCard')">ELCard</el-button>
      </el-card>

      <el-card>
        <el-button @click="onAddComponent('ELDialog')">ELDialog</el-button>
      </el-card>
      <el-card>
        <el-button @click="onAddComponent('RDialogForm')">RDialogForm</el-button>
      </el-card>
      <el-card>
        <el-button @click="onAddComponent('RDialogForm2')">RDialogForm2</el-button>
      </el-card>
    </el-aside>
    <el-main>
      <el-cascader-panel v-model="parentRefs" :options="cascaderOptions" :props="{ checkStrictly: true }" @change="cascaderOptionsChange"></el-cascader-panel>
      <el-button @click="openJsonConfig" type="text">config</el-button>
      <r-code-viewer :componentConfig="componentConfig" @jsonChange="onJsonChange" @codeChange="onCodeChange"> </r-code-viewer>
    </el-main>

    <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :inline="true" :model="editingJson" label-width="150px">
        <el-form-item label="tag">
          <el-input v-model="editingJson.tag" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="ref">
          <el-input v-model="editingJson.ref" placeholder="ref"></el-input>
        </el-form-item>

        <el-form-item label="style">
          <el-input v-model="editingJson.style" placeholder="style"></el-input>
        </el-form-item>

        <el-form-item label="class">
          <el-input v-model="editingJson.class" placeholder="class"></el-input>
        </el-form-item>
        <el-divider content-position="left">props</el-divider>

        <el-form-item v-for="p in editingJson.props" :key="'props.' + p.prop" :label="p.prop + '.' + p.type">
          <el-switch v-model="p.source" active-text="输入确定值" inactive-text="继续传参"> </el-switch>

          <el-input v-model="p.name" :placeholder="p.prop + '.name'"></el-input>
          <el-input type="textarea" v-model="p.value" :placeholder="p.prop + '.value'"></el-input>
        </el-form-item>
        <el-divider content-position="left">evnets</el-divider>
        <el-form-item v-for="e in editingJson.events" :key="'events.' + e.event" :label="e.event">
          <el-switch v-model="e.source" active-text="自定义处理" inactive-text="继续监听"> </el-switch>
          <el-card>
            <el-input v-model="e.func" :placeholder="e.event + '.func'" style="width: 50%">
              <template slot="prepend">function </template>
            </el-input>
            <el-input v-model="e.args" :readonly="true" style="width: 50%">
              <template slot="prepend"> (</template>
              <template slot="append">) </template>
            </el-input>
            <el-input type="textarea" v-model="e.content" :placeholder="e.event">
              <template slot="prefix"> {</template>
              <template slot="append">}</template>
            </el-input>
          </el-card>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">cancel</el-button>
        <el-button type="primary" @click="renderJsonConfig">render</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
import { newComponentJson, genComponentJson, parseComponentByJson, parseComponentByStr } from '../util/templateUtil.js'
import * as config from '../components/config'

// [{ name: 'name', label: '名称' ,type:'input'}]

// alert("search "+ JSON.stringify(formData))

// alert(opt + ":" +JSON.stringify(rowData))

// [{ name: 'name', label: '名称' ,type:'input'}, { name: 'age', label: '年龄' ,type:'number',options:{}}]

function jsonToOptions(json) {
  let opt = {}
  opt.value = json.ref
  opt.label = json.tag
  if (!!json.children) {
    opt.children = json.children.map((j) => jsonToOptions(j))
  }
  // opt.disabled = !json.children && 'disabled'
  return opt
}

function findJsonByRef(json, ref) {
  if (json.ref === ref) {
    return json
  }
  if (!!json.children) {
    for (let child of json.children) {
      let res = findJsonByRef(child, ref)
      if (!!res) {
        return res
      }
    }
  }
  // opt.disabled = !json.children && 'disabled'
  return null
}

export default {
  data() {
    return {
      dialogVisible: false,
      checkedRef: '',
      refIndex: 1,
      parentRefs: [],
      componentConfig: undefined,
      json: undefined,
      editingJson: {}
    }
  },
  computed: {
    cascaderOptions() {
      if (!this.json) {
        return []
      }
      return [jsonToOptions(this.json)]
    }
  },
  methods: {
    openJsonConfig() {
      this.editingJson = findJsonByRef(this.json, this.checkedRef)
      this.dialogVisible = true
    },
    renderJsonConfig() {
      this.changeComponent(this.json)
      this.dialogVisible = false
    },
    cascaderOptionsChange(refs) {
      this.checkedRef = refs[refs.length - 1]
      // this.$confirm('是否配置json', '提示', {
      //   confirmButtonText: '是',
      //   cancelButtonText: '否',
      //   type: 'warning'
      // })
      //   .then(() => {
      //     this.editingJson = findJsonByRef(this.json, change[change.length - 1])
      //     this.dialogVisible = true
      //   })
      //   .catch(() => {})
    },
    changeComponent(componentJson) {
      this.componentConfig = parseComponentByJson(componentJson)
      this.json = componentJson
      console.log(JSON.stringify(newComponentJson(this.json, ''), null, 2))
    },
    onAddComponent(component) {
      let temp = config[component]()

      // switch (component) {
      //   case 'RForm':
      //     temp = RForm()
      //     break
      //   case 'RTable':
      //     temp = RTable()
      //     break
      //   case 'ELCard':
      //     temp = ELCard()
      //     break
      //   case 'ELDialog':
      //     temp = ELDialog()
      // }
      temp.ref = (temp.ref || component) + this.refIndex
      console.log(temp)
      console.log('temp')
      this.refIndex++
      let componentJson = genComponentJson(this.componentConfig?.json, this.parentRefs.length > 0 ? this.parentRefs[this.parentRefs.length - 1] : '', temp)
      this.changeComponent(componentJson)
    },
    onJsonChange(sourceJson) {
      if (!!sourceJson && sourceJson != JSON.stringify(this.componentConfig.json, null, 2)) {
        this.changeComponent(JSON.parse(sourceJson))
      }
    },
    onCodeChange(sourceCode) {
      if (!!sourceCode && sourceCode != this.componentConfig.sourceCode) {
        this.componentConfig = { ...parseComponentByStr(sourceCode), json: this.componentConfig.json }
      }
    }
  }
}
</script>
